<template>
    <div class="RepaymentSchedule contract-detial-page contract-inquiry-detial contract-detail-page">
        <Card>
            <div class=" top-btn" style="padding-bottom: 16px;">
                <Button type="primary" @click="printTable">打印</Button>
            </div>
            <div class="contract-detail-collapse">
                <div id="printTable">
                    <h3 class="head_table">天津长城滨银汽车金融有限公司</h3>
                    <h3 class="head_table">还款计划</h3>
                    <h3 class="head_table">只以提供信息为目的</h3>
                    <div class="form">
                        <Form ref="formData" :model="formData" :label-width="140" disabled>
                            <Row>
                                <Col :span="planMode ? 8 : 24" v-for="(item,index) in formDataList" :key="index">
                                    <FormItem :label="item['name']" >
                                        <Input v-model="formData[item.key]" class="w200" placeholder />
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                    <div class="table" style="width: 99.5%;padding-top: 16px">
                    <Table :columns="tableHead" :data="repaymentPlan"
                           :loading="loading" border show-summary :summary-method="handleSummary"></Table>
                    </div>
                </div>
            </div>
        </Card>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>

<script>
    import {getDictDataList} from "_p/basic/assets/contract/js/utils";
    import {findRepaymentPlan,} from "_p/basic/api/contract/contract-detail-inquiry";
    import printJS from "print-js";

    export default {
        // 合同明细详情
        name: "RepaymentSchedule",
        data() {
            return {
                loading: false,
                pageParams: null,
                contractNo: "",
                openPanel: [],
                // 放款模式(loanModel) 变更类型  变更主体(PersonRoleType)
                dictArr: ["loanModel", "PersonRoleType"],
                dataDict: {},
                spinShow: false,
                planMode: null,
                fixedInterestRate:[
                    {key:'contract_no',name:'合同号码'},
                    {key:'start_date',name:'开始日期',minWidth:100,},
                    {key:'end_date',name:'结束日期'},

                    {key:'customer',name:'客户姓名'},
                    {key:'loan_money',name:'贷款金额'},
                    {key:'loan_deadline',name:'还款期限'}, //贷款期限

                    {key:'finance_product',name:'金融产品'}, //
                    {key:'total_interest',name:'利息总额'},
                    {key:'payment_mode',name:'还款方式'},

                    {key:'vehicle_desc',name:'车辆描述'},
                    {key:'total_remain',name:'余款金额'},
                    {key:'payment_frequency',name:'付款频率'},
                    {key:'rate',name:'利率'}, //客户利率
                ],
                floatingRate:[
                    {key:'contract_no',name:'合同号码'},
                    {key:'customer',name:'雇主'},
                    {key:'loan_money',name:'贷款金额(%)'},
                    {key:'rate',name:'利率(%)'},
                    {key:'profit_margin',name:'边际利润率(%)'},
                    {key:'base_rate',name:'基准率'},
                    {key:'loan_deadline',name:'租赁期'},
                ],
                formDataList:[],
                formData:{},
                tableHead:[],
                // 固定利率的表头
                fixedInterestRateHead: [
                    // {title: "到期日", key: "due_day",minWidth:100,},
                    // {title: "还款期数", key: "loan_peroid",width:70,},
                    // {title: "未偿本金", key: "outstanding_principal",minWidth:100,},
                    // {title: "还款本金额", key: "payment_month",minWidth:100,},
                    // {title: "还款利息额", key: "repayment_interest",minWidth:100,},
                    // {title: "月息", key: "month_interest",minWidth:80,},
                    // {title: "复合利息金额", key: "compound_total_interest",minWidth:100,},
                    // {title: "净还款金额", key: "actual_payment_amount",minWidth:100,},
                    // {title: "杂费", key: "incidentals",minWidth:100,},
                    // {title: "已付款总额", key: "total_payment",minWidth:100,},
                    // {title: "未承兑/取消", key: "non_acceptance",minWidth:100,},
                    // {title: "实际还款日", key: "actual_payment_day",minWidth:100,},
                    // {title: "逾期天数", key: "overdue_dd",minWidth:70,},
                    {title: "到期日", key: "due_day",},
                    {title: "还款期数", key: "loan_peroid",},
                    {title: "未偿本金", key: "outstanding_principal",},
                    {title: "还款本金额", key: "receivablePrinciple",},
                    {title: "还款利息额", key: "repayment_interest",},
                    {title: "月息", key: "month_interest",},
                    {title: "复合利息金额", key: "compound_total_interest",},
                    {title: "净还款金额", key: "actual_payment_amount",},
                    {title: "杂费", key: "incidentals",},
                    {title: "已付款总额", key: "total_payment",},
                    {title: "未承兑/取消", key: "non_acceptance",},
                    {title: "实际还款日", key: "actual_payment_day",},
                    {title: "逾期天数", key: "overdue_dd",},
                ],
                // 浮动利率表头
                floatingRateHead:[
                    {title: "还款期数", key: "loan_peroid",},
                    {title: "到期日", key: "due_day",},
                    {title: "月度应还款本金构成", key: "capital",},
                    {title: "利息额", key: "repayment_interest",},
                    {title: "月息", key: "month_interest",},
                    {title: "复合利息金额", key: "compound_total_interest",},
                    {title: "分期付款数额", key: "payment_month",},
                    {title: "结算金额", key: "settlement_amount",},
                    {title: "未结消本金数额", key: "outstanding_principal",},
                    {title: "调整身份", key: "identity",},
                ],
                repaymentPlan: [],
            };
        },
        computed: {},
        created() {
            this.getParams();
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getDetial();
                this.getDictDataList();
            },
            // 获取初始数据
            getParams() {
                const pageParams = this.afs.getPageParams(this);
                this.pageParams = pageParams;
                this.contractNo = pageParams.contractNo;
                this.applyNo = pageParams.applyNo;
            },
            // 数据字典
            getDictDataList() {
                getDictDataList(this.dictArr).then(res => {
                    this.dataDict = res;
                });
            },
            // 请求数据
            getDetial() {
                let d = {application_no:this.applyNo,contractNo:this.contractNo}
                // 应收
                findRepaymentPlan(d).then(res => {
                    if (res.code === "0000" && res.data) {
                        const {repayment_plan,plan_mode} = res.data;
                        this.planMode = plan_mode;
                        if(plan_mode) {
                            this.formDataList = this.fixedInterestRate;
                            this.tableHead = this.fixedInterestRateHead;
                        }else  {
                            this.formDataList = this.floatingRate;
                            this.tableHead = this.floatingRateHead;
                        }
                        this.repaymentPlan = repayment_plan;
                        this.formData = res.data;
                    }
                });
            },
            printTable(){
                printJS({
                    printable:'printTable',
                    type:'html',
                    maxWidth: '100%',
                    style: "table { border: 1px solid #dcdee2 !important} ",
                    targetStyles: ['*'],
                    ignoreElements:['noPrint_1'],
                })
            },
            back() {
                //关闭页面
                this.afs.closeTab(this);
            },
            showSpin() {
                this.spinShow = true;
            },
            closeSpin() {
                this.spinShow = false;
            },
            changChildrenData(refDom, name, value) {
                console.log(this.$refs[refDom], "this.$refs[name]");
                if (this.$refs[refDom]) {
                    this.$refs[refDom][name] = value;
                }
            },
            handleSummary ({ columns, data }) {
                const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (index === 0) {
                        sums[key] = {
                            key,
                            value: '总额'
                        };
                        return;
                    }
                    const values = data.map(item => Number(item[key]));
                    if (index === 3 ||index === 4|| index === 7 ||index === 9){
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[key] = {
                            key,
                            value: v.toFixed(2)
                        };
                    } else {
                        sums[key] = {
                            key,
                            value: '/'
                        };
                    }
                });

                return sums;
            }
        }
    };
</script>
<style lang="less">
    @import "../../../../../styles/common/form.less";

    .RepaymentSchedule {

        .head_table {
            text-align: center;
        }

        &.contract-detail-page .contract-detail-collapse {
            border: none;
        }

        .ivu-form-item {
            margin-bottom: 2px;
        }
    }
    @media print {
        .ivu-table-cell {
            padding: 0 8px;
        }
    }

</style>
